<template>
  <ThreeBox ref="container"></ThreeBox>
</template>

<script setup>
import ThreeBox from "../../components/ThreeBox.vue";
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "../../lib/three/controls/OrbitControls";

const container = ref(null);
let threeBox = null;
let threePara = null;
let scene = new THREE.Scene();

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  threePara.renderer.render(scene, threePara.camera);
}

function init() {
  //环境光
  let ambient = new THREE.AmbientLight(0xffffff);
  scene.add(ambient);

  //纹理
  let loader = new THREE.CubeTextureLoader();
  loader.setPath("./three/skybox/HornstullsStrand2/");
  let textureCube = loader.load([
    "posx.jpg",
    "negx.jpg",
    "posy.jpg",
    "negy.jpg",
    "posz.jpg",
    "negz.jpg",
  ]);
  scene.background = textureCube;

  //多面体
  let sphereGeometry = new THREE.IcosahedronGeometry(400, 15);
  let sphereMaterial = new THREE.MeshLambertMaterial({ envMap: textureCube });
  let sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
  scene.add(sphereMesh);

  //相机
  threePara.camera = new THREE.PerspectiveCamera(
    70,
    threeBox.clientWidth / threeBox.clientHeight,
    1,
    100000
  );
  threePara.camera.position.set(0, 0, 1000);
  threePara.camera.lookAt(0, 0, 0);

  //渲染器
  threePara.renderer = new THREE.WebGLRenderer();
  threePara.renderer.setPixelRatio(window.devicePixelRatio);
  threePara.renderer.setSize(threeBox.clientWidth, threeBox.clientHeight);
  threeBox.appendChild(threePara.renderer.domElement);

  //控制器
  let controls = new OrbitControls(
    threePara.camera,
    threePara.renderer.domElement
  );
  controls.minDistance = 500;
  controls.maxDistance = 3000;
}

onMounted(() => {
  threeBox = container.value.threeBox;
  threePara = container.value.threePara;
  init();
  animate();
});
</script>
